<!--分散式房源编辑对话框-->
<template>
	<a-modal v-bind="options">
		<a-tabs v-model:active-key="houseType" v-bind="tabOptions">
			<template #leftExtra>
				<a-typography-title :level="5" v-color="{color: 'primary'}">
					<template v-if="value.transform">{{ value.houseType === 1 ? '转为整租' : '转为合租' }}</template>
					<template v-else>{{ value.id ? '编辑房源' : '添加房源' }}</template>
				</a-typography-title>
			</template>
			<template v-if="store.hasPermissions(['mk_house_distributed_tjfy', 'mk_house_distributed_bjfy', 'mk_house_distributed_zwhz'])">
				<a-tab-pane key="2" tab="&nbsp;&nbsp;合租&nbsp;&nbsp;" :disabled="!!value.id">
					<house-distributed-form :value="value" />
				</a-tab-pane>
			</template>
			<template v-if="store.hasPermissions(['mk_house_distributed_tjfy', 'mk_house_distributed_bjfy', 'mk_house_distributed_zwzz'])">
				<a-tab-pane key="1" tab="&nbsp;&nbsp;整租&nbsp;&nbsp;" :disabled="!!value.id">
					<house-distributed-form :value="value" />
				</a-tab-pane>
			</template>
			<template v-if="store.hasPermissions(['mk_house_centralized_tjlp', 'mk_house_centralized_bjlp'])">
				<a-tab-pane key="3" tab="&nbsp;&nbsp;集中&nbsp;&nbsp;" :disabled="!!value.id">
					<house-centralized-form :value="value" />
				</a-tab-pane>
			</template>
		</a-tabs>
		<template #footer />
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, reactive, toRef} from 'vue'
	import {HouseBase,defaultHouse} from '@/interface/house'
	import {Community, defaultCommunity} from '@/interface/community'
	import HouseDistributedForm from '@/components/house/edit/distributed/house-distributed-form.vue'
	import HouseCentralizedForm from '@/components/house/edit/centralized/house-centralized-form.vue'
	import {useStore} from '@/store'

	const store = useStore()

	const props = defineProps<{
		visible: boolean
		value: HouseBase | Community
	}>()

	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		width: '100%',
		header: null,
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		class: 'house-edit-dialog',
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const tabOptions = reactive({
		centered: true,
		class: 'house-edit-tabs',
		destroyInactiveTabPane: true
	})

	// 房源信息
	const houseOrCommunity = toRef(props, 'value')

	// 房源类型（1整租2合租3集中4民宿）
	const houseType = computed({
		get: () => {
			return String(houseOrCommunity.value.houseType || 2)
		},
		set: value => {
			if (!houseOrCommunity.value.id) {
				if (value === '3' && !houseOrCommunity.value.buildings) {
					Object.assign(houseOrCommunity.value, defaultCommunity())
				}
				if (value === '2') {
					Object.assign(houseOrCommunity.value, defaultHouse())
				}
				houseOrCommunity.value.houseType = Number(value)
			}
		}
	})
</script>

<style lang="less">
	.house-edit-dialog {
		max-width: 1400px;

		.ant-modal-body {
			padding: 0;
			overflow: auto;
			min-height: 800px;
			max-height: 1200px;
			height: calc(100vh - 100px);

			.ant-tabs,
			.ant-tabs-content {
				height: 100%;
				overflow: auto;
			}

			.house-edit-tabs {
				> .ant-tabs-nav {
					padding: 6px 12px 0;
					margin-bottom: 0;
					background: rgba(0, 0, 0, 0.02);

					> .ant-tabs-nav-wrap {
						margin-left: -65px;
					}
				}
			}
		}
	}
</style>
